<script type="text/x-template" id="poster-text-detect">
    <el-row>
        <el-col :span="12">
            <el-card class="form-card">
                <el-form :model="posterData" label-width="100px"  ref="posterDataForm">
                    <el-form-item label="类型" prop="type">
                        <el-select v-model="posterData.type">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <template v-if="posterData.type === 'common'">
                        <el-form-item label="是否带位置" prop="withPosition">
                            <el-radio-group
                                    v-model="posterData.withPosition"
                            >
                                <el-radio v-for="(item, key) in TRUE_FALSE_DICT" :key="key" :label="item.value">{{
                                    item.label
                                    }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </template>
                    <el-form-item label="上传海报">
                        <el-upload class="upload-demo"
                                   accept="image/jpeg,image/jpg,image/png"
                                   ref="upload"
                                   :before-upload="beforeUpload"
                                   :limit="1"
                                   drag
                                   list-type="picture-card"
                                   :on-change="onchange"
                                   :auto-upload="false">
                        </el-upload>

                    </el-form-item>
                    <el-form-item>
                        <el-button style="margin-left: 10px;" :disabled="disabledSubmit == 1" size="small" type="success" @click="submitUpload">确定</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="warning" @click="empty">清空</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card class="json-card">
                <div slot="header" class="clearfix">
                    <span>返回Json信息</span>
                </div>
                <pre class="json">{{ jsonString }}</pre>
            </el-card>
        </el-col>
    </el-row>
</script>

<script>
    Vue.component('poster-text-detect', {
        template: '#poster-text-detect',
        data: function () {
            return {
                disabledSubmit: 0,
                jsonString: '',
                posterData:{
                     'type': 'common',
                     'withPosition': 0,
                },
                options:[],
                TRUE_FALSE_DICT: [
                    {
                        label: '是',
                        value: 1
                    },
                    {
                        label: '否',
                        value: 0
                    }
                ],
                urls: {
                    textDetect: '/v1/aiPoster/textDetect.html',
                },
            };
        },
        methods: {
            onchange(f, list) {
                // console.log("this.$refs.upload", this.$refs.upload.uploadFiles)
            },
            empty(){
                this.$refs.upload.clearFiles()
            },
            submitUpload() {
                if (this.$refs.upload.uploadFiles.length == 0){
                    this.$message({
                        message: '请上传图片'
                    })
                }else {
                    this.disabledSubmit = 1
                    this.formData = new FormData()
                    this.$refs.upload.uploadFiles.forEach((_) => {
                        this.formData.append('file',_.raw,_.name)
                        this.formData.append('type', this.posterData.type)
                        this.formData.append('withPosition', this.posterData.withPosition)
                    })
                    this.ajaxUpload(this.urls.textDetect,  this.formData, function (result) {
                            if (result.code == 0) {
                                this.$message({
                                    type: 'success',
                                    message: "操作成功！"
                                })
                                if(result.data){
                                    this.jsonString = JSON.stringify(result.data, null, 2);
                                }else {
                                    this.$message({
                                        message: '未提取到文字信息'
                                    })
                                }
                                this.disabledSubmit = 0
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: result.msg
                                })
                                this.disabledSubmit = 0
                            }
                        }.bind(this)
                    );
                }
            },
            loadTypeOptions() {
                this.options=[
                    {label : '不限',value:'common'},
                    {label : '电视请求头提取',value:'tvHeader'},
                ]
            },
            beforeUpload(file) {

            },
            cancel(){

            },
            submit(){

            }
        },
        watch: {},
        mounted() {
            this.loadTypeOptions()
        },
        created() {
        }
    })
</script>

<style>
    .json {
        text-align: left;
        font-size: 16px;
    }

    .form-card {
        text-align: left;
        vertical-align: middle;
        width: 100%;
    }
    .json-card {
        text-align: left;
        vertical-align: middle;
        height: auto;
        width: 100%;
    }
</style>